<template>
    <!--:model="tenant" 数据双向绑定-->
    <!--ref="tenantForm" id="tenantForm",给form去一个名字-->
    <!--:rules="formRules" 校验规则-->
    <div>
        <el-form :model="employee" ref="tenantForm" :rules="formRules" label-position="left" label-width="100px"
                 class="demo-ruleForm login-container">
            <!--tab标签-->
            <el-tabs type="border-card" style="height: 100%;width: 100%;margin: 0px;padding: 0px" v-model="activeName"
                     @tab-click="handleClick">
                <el-tab-pane label="公司入驻" name="first">
                    <el-form-item prop="companyName" label="公司名称">
                        <el-input type="text" v-model="employee.companyName" auto-complete="off"
                                  placeholder="请输入公司名称！"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input type="password" v-model="employee.password" auto-complete="off"
                                  placeholder="请输入密码！"></el-input>
                    </el-form-item>
                    <el-form-item prop="comfirmPassword" label="确认密码">
                        <el-input type="password" v-model="employee.comfirmPassword" auto-complete="off"
                                  placeholder="请输入确认密码！"></el-input>
                    </el-form-item>
                    <el-form-item prop="companyNum" label="公司座机">
                        <el-input type="text" v-model="employee.companyNum" auto-complete="off"
                                  placeholder="请输入座机！"></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="电子邮件">
                        <el-input type="text" v-model="employee.email" auto-complete="off"
                                  placeholder="请输入邮件！"></el-input>
                    </el-form-item>
                    <el-form-item prop="address" label="公司地址">
                        <el-input type="text" v-model="employee.address" auto-complete="off" style="width:70%;"
                                  placeholder="请输入地址！"></el-input>
                        <el-button type="primary" style="width:25%;" @click.native.prevent="baiduMapVisible=true">地图选址
                        </el-button>
                    </el-form-item>
                    <el-form-item prop="logoUrl" label="公司Logo">
                        <!--上传-->
                        <el-upload
                                class="upload-demo"
                                action="http://localhost/file/logoUpload"
                                :on-success="handleSuccess"
                                :limit="1"
                                :on-exceed="handleExceed"
                                :file-list="fileList"
                                list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item style="width:100%;">
                        <el-button type="primary" style="width:100%;" @click.native.prevent="settledIn">入驻</el-button>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="员工注册" name="second"></el-tab-pane>
            </el-tabs>
        </el-form>

        <!--百度地图-->
        <el-dialog width="60%" :visible.sync="baiduMapVisible" :close-on-click-modal="false">
            <baidu-map class="bm-view">
                <baidu-map :center="center" :zoom="11">
                    <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 2100}">
                        <div style="margin-bottom:10px">
                            <input id="searchInput" type="text" placeholder="请输入关键字" class="searchinput"/>
                            <el-button type="success" @click="selectAdrressConfirm">确定</el-button>
                        </div>
                    </bm-auto-complete>
                    <bm-view class="bmap"/>
                    <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false"></bm-local-search>
                </baidu-map>
            </baidu-map>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.employee.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                /*地图窗口的可见性*/
                baiduMapVisible: false,
                /*地图的搜索关键字*/
                keyword: '',
                /*地图的初始位置*/
                center: '成都市',
                /*不知道干啥用的*/
                fileList: [],
                /*选项卡切换值*/
                activeName: 'first',
                /*对象封装的值*/
                employee: {
                    companyName: '',
                    companyNum: '',
                    password: '',
                    email: '',
                    address: '',
                    logoUrl: '',
                    /*不进行封装*/
                    comfirmPassword: ''
                },
                formRules: {
                    companyName: [
                        {required: true, message: '请输入公司名称!', trigger: 'blur'}
                    ],
                    // companyNum: [
                    //     {required: true, message: '请输入公司座机!', trigger: 'blur'}
                    // ],
                    address: [
                        {required: true, message: '请输入公司地址!', trigger: 'blur'}
                    ],
                    // logoUrl: [
                    //     {required: true, message: '请输入公司logo!', trigger: 'blur'}
                    // ],
                    // email: [
                    //     {type: 'email', required: true, message: '请输入邮箱!', trigger: 'blur'}
                    // ],
                    password: [
                        {required: true, message: '请输入密码!', trigger: 'blur'}
                    ],
                    comfirmPassword: [
                        {required: true, validator: validatePass2, trigger: 'blur'} //自定义校验规则
                    ]
                }
            };
        },
        methods: {
            /*地图搜索结果回显到文本框*/
            selectAdrressConfirm() {
                /*获取地址*/
                let res = document.getElementById("searchInput").value;
                /*回显*/
                this.employee.address = res;
                this.baiduMapVisible = false;
            },
            /*图片上传结果*/
            handleSuccess(res, file, fileList) {
                if (res.success) {
                    //后台上传成功之后，返回图片名
                    this.employee.logoUrl = res.fileName;
                }
                else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            },
            /*上传个数限制*/
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件`);
            },
            /*跳转到员工注册选项卡*/
            handleClick(tab, event) {
                if (tab.index == 1) {
                    this.$router.push({path: '/registerForEmployee'});
                }
            },
            /*注册*/
            settledIn() {
                this.$refs.tenantForm.validate((valid) => {
                    //校验表单
                    if (valid) {
                        this.$confirm('确认入驻吗？', '提示', {}).then(() => {
                            //表单值拷贝
                            let para = Object.assign({}, this.employee);
                            /*添加请求*/
                            this.$http.put("/tenant/save", para).then((res) => {
                                if (res.data.success) {
                                    //重置表单
                                    // this.$refs['tenantForm'].resetFields();
                                    //跳转登录页面
                                    this.$router.push({path: '/login'});
                                }
                                else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }

                            });
                        });
                    }
                })
            }
        }
    }

</script>
<style>
    .el-tabs__nav-wrap
    .el-tabs__nav-scroll
    .el-tabs__nav {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
</style>
<style lang="scss" scoped>

    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 0px auto;
        width: 500px;
        padding: 10px 0px 0px 0px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }
    }

    .bmap {
        width: 100%;
        height: 600px;
    }

    .searchinput {
        width: 300px;
        box-sizing: border-box;
        padding: 9px;
        border: 1px solid #dddee1;
        line-height: 20px;
        font-size: 16px;
        height: 38px;
        color: #333;
        position: relative;
        border-radius: 4px;
    }
</style>

